<template>
  <AdminLayout>
    <!-- 后台联系我们表单管理主容器 -->
    <div>
      <h1>表单管理</h1>
      <!-- 联系我们表单数据列表 -->
      <el-table :data="contacts" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="phone" label="电话" width="140" />
        <el-table-column prop="message" label="留言" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" type="danger" @click="onDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </AdminLayout>
</template>

<script setup>
import AdminLayout from '~/components/AdminLayout.vue'
import { ref, onMounted } from 'vue'
const contacts = ref([])

// 获取表单数据
async function fetchContacts() {
  const res = await fetch('/api/contact-list')
  contacts.value = await res.json()
}

// 删除表单数据
async function onDelete(id) {
  await fetch(`/api/contact-list?id=${id}`, { method: 'DELETE' })
  await fetchContacts()
}

onMounted(fetchContacts)
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}
</style> 